<template>
	<view>
		<ABanner :isSeach="false"></ABanner>
		<view class="detail_index">
			<view class="tips_title">
				等待买家付款
			</view>
			<view class="shop_detail">
				<view class="pic_content">
					<image :src="params.machineProduct.realProductImgUrl" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title1">
						{{params.machineProduct.productName}}
						<span>￥{{params.machineProduct.price}}</span>
					</view>
					<!-- <view class="description">
						超熟睡420柔棉感量多夜用纤巧棉柔 4片/包
					</view>
					<view class="category">
						棉柔|夜用
					</view> -->
				</view>
			</view>
			<view class="price_title">
				需付款{{params.totalPrice}}元
			</view>
			<view class="shop_info_desc">
				<view class="shop_item">
					<view class="shop_num">
						订单编号:
					</view>
					<view class="value">
						{{params.orderId}}
					</view>
				</view>
				<view class="shop_item">
					<view class="shop_num">
						商品编号:
					</view>
					<view class="value">
						{{params.machineProduct.productId}}
					</view>
				</view>
				<view class="shop_item">
					<view class="shop_num">
						库存:
					</view>
					<view class="value">
						{{params.machineProduct.extantQuantity}}
					</view>
				</view>
				<view class="shop_item">
					<view class="shop_num">
						货道口:
					</view>
					<view class="value">
						{{params.machineProduct.slotNo}}
					</view>
				</view>
				<view class="shop_item">
					<view class="shop_num">
						下单时间:
					</view>
					<view class="value">
						{{params.createTime}}
					</view>
				</view>
			</view>
		</view>

		<view class="detail_index">
			<view class="item_container">
				<u-radio-group wrap v-model="radioSelected" @change="groupChange">
					<view v-for="(item,index) in payType" :key="index" class="item_info">
						<view class="info_item">
							<image :src="item.type" mode=""></image>
							<text class="title_info">
								{{item.title}}
							</text>
						</view>
						<view class="">
							<u-radio size="40" iconSize="40" :key="index" :name="item.id" @change="radioChange">
							</u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		<AShopCar :radioSelected="radioSelected" :itemData="itemData" :params="params" :pay="true"></AShopCar>
	</view>
</template>

<script>
	import zfbLog from '@/pages/user/static/images/zfb.png'
	import weixin from '@/pages/user/static/images/weixin.png'
	import huabei from '@/pages/user/static/images/huabei.png'
	import douyin from '@/pages/user/static/images/douyin.png'
	import yighangka from '@/pages/user/static/images/yinghangka.png'
	import {
		getShop
	} from '@/api/order.js'
	import {
		checkLogin
	} from '../../../libs/login'
	export default {
		data() {
			return {
				childArr: ["订单详情"],
				itemData: {},
				zfbLog: zfbLog,
				weixin: weixin,
				huabei: huabei,
				douyin: douyin,
				yighangka: yighangka,
				radioSelected: '',
				params: {
					machineProduct: {}
				},
				payType: [
					// 	{
					// 	title: '支付宝',
					// 	type: zfbLog,
					// 	id: 1
					// }, 
					{
						'title': '微信',
						type: weixin,
						id: 2
					},
					// {
					// 	title: '花呗支付',
					// 	type: huabei,
					// 	id: 3
					// }, 
					// {
					// 	title: '抖音支付',
					// 	type: douyin,
					// 	id: 4
					// }, 
					// {
					// 	title: '银行卡支付',
					// 	type: yighangka,
					// 	id: 5
					// },
				]
			}
		},
		onLoad(options) {
			let decodeURIComponentStr = decodeURIComponent(options.item);
			this.itemData = JSON.parse(decodeURIComponentStr);
			getShop(this.itemData.orderId).then(res => {
				this.params = res.data
				this.params.machineProduct = res.data.machineProduct
				this.myParams.price = this.params.machineProduct.price
			})
		},
		methods: {
			groupChange(e) {
				console.log(e);
				this.radioSelected = e
			},
			radioChange(e) {
				console.log(this.radioSelected);
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail_index {
		background-color: #fff;
		border-radius: 10rpx;
		// margin-top: -30rpx;
		width: 95%;
		margin: -20rpx auto;
		margin-bottom: 40rpx;

		/deep/ .u-radio-group {
			display: flex;
			flex-direction: column;
		}

		.item_container {
			display: flex;
			flex-direction: column;

			.item_info {

				margin: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info_item {}

				image {
					padding: 0 20rpx;
					width: 40rpx;
					height: 40rpx;
				}


			}

		}

		.tips_title {
			font-size: 36rpx;
			color: #F86853;
			padding: 20rpx 30rpx;
		}

		.shop_detail {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20rpx;
			width: 100%;

			.pic_content {
				width: 30%;

				image {
					width: 100%;
				}
			}

			.content {
				width: 70%;
				margin-left: 20rpx;

				.title1 {
					font-size: 36rpx;

					span {
						font-size: 38rpx;
						float: right;
						font-weight: bold;
					}

				}

				.description {
					margin: 20rpx 0;
					letter-spacing: 0.10rem;
				}

				.category {
					font-size: 24rpx;
					color: #B0B0B0;
				}
			}
		}

		.price_title {
			// float: right;
			text-align: right;
			font-size: 38rpx;
			margin: 20rpx 70rpx;
		}

		.shop_info_desc {
			padding: 20rpx;

			.shop_item {
				margin: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.value {
					color: #A9A9A9;
				}
			}
		}

	}
</style>